<template>
  <div class="search-container">
    <van-nav-bar
      title="搜索"
      left-arrow
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>

    </van-nav-bar>
    <div class="search-view">
      <van-search ref="search" v-model="searchKey" placeholder="请输入搜索关键词" @input="onInput"
                  @search="enterSearch"
                  autofocus/>
      <!-- 搜索提示-->
      <div class="search-pop" v-show="showPop" :style="{top:marginTop+'px'}">
        <div class="search-key-list">
          <div v-for="i in 10" :key="i" class="search-key-item">
            {{ searchKey }}
            <van-divider/>
          </div>
        </div>
      </div>
    </div>

    <!-- 历史搜索记录-->
    <div v-show="showHistory" class="search-history-wrap">
      <div class="search-history">
        <span>搜索历史</span>
        <span class="clear">清除</span>
      </div>
      <ul>
        <li v-for="(item,index) in searchHistory" :key="index" @click="clickSearch(item)">
          {{ item }}
        </li>
      </ul>
    </div>

    <van-list
      v-show="list.length>0"
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="loadMore"
    >

      <item-list :list="list" @onItemClick="onItemClick"/>
    </van-list>

  </div>
</template>

<script>
import {goodsList} from '../../api/items'
import ItemList from '../../components/ItemList'

export default {
  name: 'search',
  components: {ItemList},
  computed: {
    showPop () {
      return this.showSearch && this.list.length <= 0
    },
    showHistory () {
      return !this.showSearch && this.list.length <= 0
    }
  },
  mounted () {
    this.$set(this.popStyleObj, 'top', this.$refs.search.offsetHeight + 'px')
  },
  created () {
    let history = JSON.parse(localStorage.getItem('searchHistory'))
    if (history !== null) {
      this.searchHistory = history
    }
  },
  data () {
    return {
      searchKey: null,
      marginTop: 50,
      showSearch: true,
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      finished: false,
      isEmpty: false,
      searchHistory: [],
      popStyleObj:{
        top:'50px'
      }
    }
  },
  methods: {
    onItemClick (item) {
      this.$router.push({name: 'detail', params: {id: item.id}})
    },
    enterSearch () {
      this.searchHistory.push(this.searchKey)
      localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory))
      this.reset()
      this.searchGoods()
    },
    clickSearch (word) {
      this.keyword = word.trim()
      this.reset()
      this.searchGoods()
    },
    reset () {
      this.list = []
      this.page = 1
      this.limit = 10
      this.total = 0
      this.loading = false
      this.finished = false
      this.isEmpty = false
    },
    searchGoods () {
      goodsList({
        keyword: this.keyword,
        page: this.page,
        limit: this.limit,
        categoryId: 0
      }).then(res => {
        var data = res.data.data
        this.list.push(...data.list)
        this.page = data.page
        this.limit = data.limit
        this.pages = data.pages
      })
    },
    async loadMore () {
      this.loading = false
      this.page += 1
      await this.searchGoods()
      this.loading = false
      if (this.pages <= this.page) {
        this.finished = true
      }
    },
    onInput (text) {
      if (text != null && text !== '' && text !== 'undefined') {
        this.showSearch = true
      } else {
        this.showSearch = false
      }
    }
  }
}
</script>

<style scoped>
.search-key-list {
  padding-top: 10px;
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.search-key-item {
  padding: 0 12px;
}

.search-container {
  height: 100%;
}

.search-view {
  position: relative;
}

.search-history {
  font-size: 14px;
}

.search-history-wrap ul {
  list-style: none;
}

.search-history-wrap li {
  background-color: #c5c9cf;
  margin-top: 10px;
  font-size: 12px;
  color: black;
  border-radius: 20px;
  padding: 3px 10px;
  margin-right: 5px;
  list-style: none;
  float: left;
  display: inline-block;
}

.search-history-wrap {
  padding: 10px;
  background-color: white;
  height: 100%;
}

.clear {
  float: right;
  font-size: 14px;
  color: #c5c5c5;
}

.search-pop {
  background: white;
  z-index: 2000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

}
</style>
